<template>
<view class="address-new-box">
  <form>
    <view class="cu-form-group">
      <view class="title">收货人</view>
      <input placeholder="请输入收货人姓名" name="truename" @input="truenameInput" :value="addressConfig.truename"/>
    </view>
    <view class="cu-form-group">
      <view class="title">手机号码</view>
      <input placeholder="请输入收货人联系电话" name="phone" :maxlength="20" @input="phoneInput" :value="addressConfig.phone"/>
      <view class="text-xxl" @tap="openAddressbook">
        <text class='cuIcon-addressbook'></text>
      </view>
    </view>
    <view class="cu-form-group" @tap="openAddres">
      <view class="title">所在地区</view>
      <view class="action flex-sub">
        <text>{{addressConfig.addressRegionLabel}}</text>
      </view>
      <text class='cuIcon-right'></text>
    </view>
    <view class="cu-form-group">
      <textarea maxlength="-1" :disabled="false" @input="addressInput" placeholder="详细地址: 如道路、门牌号、小区、楼栋号、单元室" :value="addressConfig.address"></textarea>
    </view>
    <view class="cu-form-group margin-top">
      <view class="title">设为默认地址</view>
      <switch class='orange' @change="toggleDefault" :class="addressConfig.isdefault?'checked':''" :checked="addressConfig.isdefault?true:false" color="#ffc27e"></switch>
    </view>

    <view class="cu-form-group margin-top" v-if="ifEditMode" @tap="tapDelete">
      <view class="title text-red">删除收货地址</view>
    </view>
  </form>
  <simple-address ref="simpleAddress" :pickerValueDefault="addressConfig.addressRegion" @onConfirm="onRegionChange" themeColor='#ffc27e'></simple-address>
</view>
</template>

<script>
// todo 获取用户通讯录, 从通讯录选择收货人和电话号码
import { mapGetters } from 'vuex'

export default {
  name: 'addressEdit', // 添加/编辑收货地址
  data () {
    return {
      addressConfig: {
        id: 0,
        truename: '',
        phone: '',
        province: '',
        city: '',
        area: '',
        address: '',
        addressRegion: [0, 0, 0],
        addressRegionLabel: '',
        isdefault: 0
      }
    }
  },
  computed: {
    ...mapGetters([
      'selectedContact'
    ]),
    curAddressId() {
      return this.addressConfig.id
    },
    ifEditMode() {
      return this.curAddressId !== 0
    },
    pageTitle() {
      return this.ifEditMode ? '编辑收货地址' : '添加新地址'
    }
  },
  watch: {
    selectedContact() {
      // 通过vuex中获取从通讯录选中的联系人
      this.addressConfig.truename = this.selectedContact.name && this.selectedContact.name
      this.addressConfig.phone = this.selectedContact.phone && this.selectedContact.phone
    }
  },
  onLoad() {
    console.log('路由参数', this.$Route.query)
    if (this.$Route.query.id) {
      for (const key in this.$Route.query) {
        if (this.$Route.query.hasOwnProperty(key)) {
          this.addressConfig[key] = this.$Route.query[key]
        }
      }
    }
    if (this.ifEditMode) {
      this.addressConfig.addressRegionLabel = `${this.addressConfig.province}-${this.addressConfig.city}-${this.addressConfig.area}`
    }
    this.$store.dispatch('setPageTitle', this.pageTitle)
    console.log('addressConfig', this.addressConfig)
  },
  methods: {
    /** 点击保存 */
    onNavigationBarButtonTap(obj) {
      console.log('保存', this.addressConfig)
      this.setAddress()
    },
    setAddress() {
      this.$api.setAddress(this.addressConfig).then(async res => {
        if (!res) return
        await this.$showSuccessToast('保存成功')
        this.$Router.back()
        console.log('编辑地址', res)
      })
    },
    tapDelete() {
      this.$showModal({
        title: '确定要删除该地址吗?',
        confirmText: '删除',
        confirmColor: '#e54d42',
        success: (res) => {
          if (res.confirm) {
            this.deleteAddress()
          }
        }
      })
    },
    deleteAddress() {
      const params = {
        id: this.curAddressId
      }
      this.$api.deleteAddress(params).then(async res => {
        if (!res) return
        await this.$showSuccessToast('删除成功')
        this.$Router.back()
      })
    },
    openAddressbook(key) {
      this.$Router.push({
        name: 'address-book',
        params: {
          type: 'address'
        }
      })
    },
    openAddres() {
      this.$refs.simpleAddress.open()
    },
    onRegionChange(e) {
      this.addressConfig.addressRegionLabel = e.label
      const regionArr = this.addressConfig.addressRegionLabel.split('-')
      this.addressConfig.province = regionArr[0]
      this.addressConfig.city = regionArr[1]
      this.addressConfig.area = regionArr[2]
      console.log('选中地区', this.addressConfig)
    },
    truenameInput(e) {
      this.addressConfig.truename = e.detail.value
    },
    phoneInput(e) {
      this.addressConfig.phone = e.detail.value
    },
    addressInput(e) {
      this.addressConfig.address = e.detail.value
    },
    toggleDefault(e) {
      this.addressConfig.isdefault = e.detail.value ? 1 : 0
      console.log('设为默认地址', this.addressConfig.isdefault)
    }
  }
}
</script>

<style lang="less">
</style>
